<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_商品列表练习</title>
</head>
<body>
    <table border="1px">
        <tr>
            <th>商品名</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </table>
<script>
    //定义数组用来模拟从后端请求回来的商品数据
    let productArr = [
        {title:'小米手机',price:5000,num:100},
        {title:'红米手机',price:5000,num:100},
        {title:'oppo手机',price:5000,num:100},
        {title:'魅族手机',price:5000,num:100},
        {title:'乐视手机',price:5000,num:100},
    ]
    let tableE = document.querySelector('table');
    for (let n = 0;n< productArr.length;n++){
        let trE = document.createElement('tr');
        let nameId = document.createElement('td');
        let priceId = document.createElement('td');
        let numId = document.createElement('td');
        nameId.innerHTML = productArr[n].title;
        priceId.innerHTML = productArr[n].price;
        numId.innerHTML = productArr[n].num;
        trE.append(nameId,priceId,numId);
        tableE.append(trE);
    }
</script>
</body>
</html>